<script setup lang="ts">
import logo from "#/assets/images/logo.png";
import wxCode from "#/assets/images/wxCode.png";
defineOptions({ name: "InfoSection" })
</script>

<template>
  <div class="info-section bg-[#3A3C49] text-white py-16">
    <div class="container mx-auto px-6 max-w-7xl">
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-12">
        <!-- 公司Logo和信息 -->
        <div class="lg:col-span-1">
          <div class="flex items-center mb-6">
            <img :src="logo" alt="深思造物">
          </div>
        </div>

        <!-- 联系信息 -->
        <div class="lg:col-span-1">
          <div class="space-y-4 text-sm text-gray-300">
            <div class="flex items-center">
              <div>
                <div class="text-[#94959C] text-[14px] leading-[22px]">联系电话</div>
                <div class="mt-[8px]">400-999-999</div>
              </div>
            </div>
            <div class="flex items-center">
              <div>
                <div class="text-[#94959C] text-[14px] leading-[22px]">电子邮箱</div>
                <div class="mt-[8px]">market@shensizaowu.com</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 快速链接 -->
        <div class="lg:col-span-1">
          <h3 class="text-[14px] leading-[22px] text-[#94959C]">快速链接</h3>
          <div class="gap-[10px] grid grid-cols-3 mt-[12px]">
            <a href="#"
              class="text-[14px] leading-[22px] text-[#DADCE6] hover:text-[#00D4AA] transition-colors duration-200">关于我们</a>
            <a href="#"
              class="text-[14px] leading-[22px] text-[#DADCE6] hover:text-[#00D4AA] transition-colors duration-200">产品服务</a>
            <a href="#"
              class="text-[14px] leading-[22px] text-[#DADCE6] hover:text-[#00D4AA] transition-colors duration-200">技术支持</a>
            <a href="#"
              class="text-[14px] leading-[22px] text-[#DADCE6] hover:text-[#00D4AA] transition-colors duration-200">帮助中心</a>
          </div>
        </div>

        <!-- 二维码区域 -->
        <div class="lg:col-span-1 flex gap-[40px] items-center">
          <div class="flex flex-col items-center">
            <img :src="wxCode" alt="">
            <span>微信公众号</span>
          </div>
          <div class="flex flex-col items-center">
            <img :src="wxCode" alt="">
            <span>客服微信</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.info-section {
  border-top: 1px solid #e2e8f0;
}
</style>
